<template>
  <div class="menu-management">
    <a-card>
      <!-- 搜索表单 -->
      <a-form layout="inline" :model="queryParams" class="search-form">
        <a-form-item :label="t('menu.name')">
          <a-input v-model:value="queryParams.name" :placeholder="t('menu.namePlaceholder')" allow-clear />
        </a-form-item>
        <a-form-item :label="t('menu.type')">
          <a-select v-model:value="queryParams.type" :placeholder="t('menu.typePlaceholder')" allow-clear>
            <a-select-option value="M">{{ t('menu.type.directory') }}</a-select-option>
            <a-select-option value="C">{{ t('menu.type.menu') }}</a-select-option>
            <a-select-option value="F">{{ t('menu.type.button') }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="t('common.status')">
          <a-select v-model:value="queryParams.status" :placeholder="t('common.statusPlaceholder')" allow-clear>
            <a-select-option :value="1">{{ t('common.normal') }}</a-select-option>
            <a-select-option :value="0">{{ t('common.disabled') }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSearch">
              <template #icon><search-outlined /></template>
              {{ t('common.search') }}
            </a-button>
            <a-button @click="handleReset">
              <template #icon><redo-outlined /></template>
              {{ t('common.reset') }}
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>

      <!-- 操作按钮 -->
      <div class="table-operations">
        <a-space>
          <a-button type="primary" @click="handleAdd">
            <template #icon><plus-outlined /></template>
            {{ t('common.add') }}
          </a-button>
          <a-button danger :disabled="!selectedRowKeys.length" @click="handleBatchDelete">
            <template #icon><delete-outlined /></template>
            {{ t('common.batchDelete') }}
          </a-button>
        </a-space>
      </div>

      <!-- 数据表格 -->
      <a-table
        :columns="columns"
        :data-source="tableData"
        :loading="loading"
        :pagination="false"
        :row-selection="{ selectedRowKeys, onChange: onSelectChange }"
        :row-key="record => record.id"
        :default-expand-all-rows="true"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'type'">
            <a-tag :color="getMenuTypeColor(record.type)">
              {{ getMenuTypeText(record.type) }}
            </a-tag>
          </template>
          <template v-if="column.key === 'status'">
            <a-tag :color="record.status === 1 ? 'success' : 'error'">
              {{ record.status === 1 ? t('common.normal') : t('common.disabled') }}
            </a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <a-space>
              <a @click="handleAdd(record)">{{ t('common.add') }}</a>
              <a-divider type="vertical" />
              <a @click="handleEdit(record)">{{ t('common.edit') }}</a>
              <a-divider type="vertical" />
              <a-popconfirm
                :title="t('menu.confirmDelete')"
                @confirm="handleDelete(record)"
              >
                <a class="danger-link">{{ t('common.delete') }}</a>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n'
import {
  SearchOutlined,
  RedoOutlined,
  PlusOutlined,
  DeleteOutlined
} from '@ant-design/icons-vue'

const { t } = useI18n()

// 查询参数
const queryParams = reactive({
  name: '',
  type: undefined,
  status: undefined
})

// 表格列定义
const columns = [
  {
    title: t('menu.name'),
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: t('menu.icon'),
    dataIndex: 'icon',
    key: 'icon',
    width: 80
  },
  {
    title: t('menu.sort'),
    dataIndex: 'sort',
    key: 'sort',
    width: 80
  },
  {
    title: t('menu.permission'),
    dataIndex: 'permission',
    key: 'permission'
  },
  {
    title: t('menu.path'),
    dataIndex: 'path',
    key: 'path'
  },
  {
    title: t('menu.component'),
    dataIndex: 'component',
    key: 'component'
  },
  {
    title: t('menu.type'),
    dataIndex: 'type',
    key: 'type',
    width: 100
  },
  {
    title: t('common.status'),
    dataIndex: 'status',
    key: 'status',
    width: 100
  },
  {
    title: t('common.action'),
    key: 'action',
    width: 200
  }
]

// 表格数据
const tableData = ref([])
const loading = ref(false)
const selectedRowKeys = ref<string[]>([])

// 获取菜单类型文本
const getMenuTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    M: t('menu.type.directory'),
    C: t('menu.type.menu'),
    F: t('menu.type.button')
  }
  return typeMap[type] || type
}

// 获取菜单类型颜色
const getMenuTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    M: 'blue',
    C: 'green',
    F: 'orange'
  }
  return colorMap[type] || 'default'
}

// 搜索
const handleSearch = () => {
  fetchData()
}

// 重置
const handleReset = () => {
  queryParams.name = ''
  queryParams.type = undefined
  queryParams.status = undefined
  handleSearch()
}

// 选择变化
const onSelectChange = (keys: string[]) => {
  selectedRowKeys.value = keys
}

// 新增
const handleAdd = (record?: any) => {
  // TODO: 实现新增功能
  message.info(t('menu.adding'))
}

// 编辑
const handleEdit = (record: any) => {
  // TODO: 实现编辑功能
  message.info(t('menu.editing'))
}

// 删除
const handleDelete = (record: any) => {
  // TODO: 实现删除功能
  message.info(t('menu.deleting'))
}

// 批量删除
const handleBatchDelete = () => {
  // TODO: 实现批量删除功能
  message.info(t('menu.batchDeleting'))
}

// 获取数据
const fetchData = async () => {
  loading.value = true
  try {
    // TODO: 调用API获取数据
    // 模拟数据
    tableData.value = [
      {
        id: 1,
        name: t('menu.system'),
        icon: 'setting',
        sort: 1,
        permission: '',
        path: '/system',
        component: 'Layout',
        type: 'M',
        status: 1,
        children: [
          {
            id: 2,
            name: t('menu.user'),
            icon: 'user',
            sort: 1,
            permission: 'system:user:list',
            path: 'user',
            component: 'system/user/index',
            type: 'C',
            status: 1
          }
        ]
      }
    ]
  } catch (error) {
    console.error('获取菜单列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 初始化
fetchData()
</script>

<style lang="less" scoped>
.menu-management {
  .search-form {
    margin-bottom: 16px;
  }

  .table-operations {
    margin-bottom: 16px;
  }

  .danger-link {
    color: @error-color;
  }
}
</style> 